<template>
  <el-row  :gutter="0" type="flex" justify="center">
    <el-col :span="8">
      <el-form  size="middle" ref="form" :model="user" label-width="100px">
        <el-form-item>
          <h2>注册用户&nbsp;&nbsp;&nbsp;&nbsp;Register User</h2>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-input v-model="user.nickName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="user.mobile"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="user.depId" placeholder="请选择" style="width: 100%">
            <el-option
                v-for="item in user.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onReg()">创建</el-button>
          <el-button type="warning">取消</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "RegistryView",
  data(){
    return{
      user: {
        userName: '',
        password: '',
        nickName: '',
        email: '',
        mobile: '',
        depId:'',
        options: [{
          value: '市场部',
          label: '市场部'
        }, {
          value: '供应链部',
          label: '供应链部'
        }, {
          value: '工艺技术部',
          label: '工艺技术部'
        }, {
          value: '计划财务部',
          label: '计划财务部'
        }, {
          value: '综合办公室',
          label: '综合办公室'
        }, {
          value: '生产制造部',
          label: '生产制造部'
        }]
      }
    }
  },
  methods:{
    onReg() {
      //发出异步post请求
      this.$http.post("/users/register", this.user).then((response) => {
        if (response.data.code == 1) {
          alert("注册成功！")
          location.href="/login";
        } else {
          alert(response.data.msg);
        }
      })
    }
  }
}
</script>

<style scoped>
.el-form{
  text-align: center;
  margin-top: 100px;
}
.el-divider{
  margin: 10px;
}
</style>